<template>
    <div>


      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
          >新增</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="success"
            icon="el-icon-edit"
            size="mini"
            :disabled="single"
            @click="handleUpdate"
          >修改</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            :disabled="multiple"
            @click="handleDelete"
          >删除</el-button>
        </el-col>

        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>

      <el-table @row-dblclick="dinaji" v-loading="loading" :data="infoList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <!--<el-table-column label="品牌ID" align="center" prop="brandId" />-->
        <el-table-column label="店铺名称" align="center" prop="shopsName" />
        <!--<el-table-column label="品牌名称" align="center" prop="brandName" />-->

        <el-table-column label="品牌名称" prop="brandName"  align="center" />
        <!--<el-table-column label="品牌名称" align="center">-->
          <!--<template slot-scope="scope">-->
            <!--<router-link :to="{ path:'/product',  query:{brandId: row.brandId} }" class="link-type">-->
            <!--&lt;!&ndash;<router-link :to="'/goods/type/product' +scope.row.brandId" class="link-type">&ndash;&gt;-->
              <!--<span>{{ scope.row.brandName }}</span>-->
            <!--</router-link>-->
          <!--</template>-->
        <!--</el-table-column>-->

        <el-table-column label="联系电话" align="center" prop="telephone" />
        <el-table-column label="品牌网络" align="center" prop="brandWeb" />
        <el-table-column label="品牌logo URL" align="center" prop="brandLogo" />
        <el-table-column label="品牌描述" align="center" prop="brandDesc" />
        <!--<el-table-column label="品牌状态,0禁用,1启用" align="center" prop="brandStatus" />-->
        <el-table-column label="品牌状态" align="center" width="100">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.brandStatus"
              active-value="0"
              inactive-value="1"
              @change="handleStatusChange(scope.row)"
            ></el-switch>
          </template>
        </el-table-column>

        <el-table-column label="排序" align="center" prop="brandOrder" />
        <el-table-column label="最后修改时间" align="center" prop="modifiedTime" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.modifiedTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
            >修改</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />

      <!-- 添加或修改品牌信息对话框 -->
      <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
        <el-form ref="form" :model="form" label-width="80px">
          <!--<el-form-item label="supplier_info表的自增ID" prop="supplierId">-->
            <!--<el-input v-model="form.supplierId" placeholder="请输入supplier_info表的自增ID" />-->
          <!--</el-form-item>-->
          <el-form-item label="品牌名称" prop="brandName">
            <el-input v-model="form.brandName" placeholder="请输入品牌名称" />
          </el-form-item>
          <el-form-item label="联系电话" prop="telephone">
            <el-input v-model="form.telephone" placeholder="请输入联系电话" />
          </el-form-item>
          <el-form-item label="品牌网络" prop="brandWeb">
            <el-input v-model="form.brandWeb" placeholder="请输入品牌网络" />
          </el-form-item>
          <el-form-item label="品牌logo" prop="brandLogo">
            <el-input v-model="form.brandLogo" placeholder="请输入品牌logo URL" />
          </el-form-item>
          <el-form-item label="品牌描述" prop="brandDesc">
            <el-input v-model="form.brandDesc" placeholder="请输入品牌描述" />
          </el-form-item>
          <!--<el-form-item label="品牌状态,0禁用,1启用">-->
            <!--<el-radio-group v-model="form.brandStatus">-->
              <!--<el-radio label="1">请选择字典生成</el-radio>-->
            <!--</el-radio-group>-->
          <!--</el-form-item>-->
          <el-form-item label="排序" prop="brandOrder">
            <el-input v-model="form.brandOrder" placeholder="请输入排序" />
          </el-form-item>
          <!--<el-form-item label="最后修改时间" prop="modifiedTime">-->
            <!--<el-date-picker clearable size="small" style="width: 200px"-->
                            <!--v-model="form.modifiedTime"-->
                            <!--type="date"-->
                            <!--value-format="yyyy-MM-dd"-->
                            <!--placeholder="选择最后修改时间">-->
            <!--</el-date-picker>-->
          <!--</el-form-item>-->
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script>
  import { listInfobi, getInfobi, delInfobi, addInfobi, updateInfobi, brandStatusbi } from "@/api/shopping/brandinfo";
  import { listInfosi, getInfosi, delInfosi, addInfosi, updateInfosi, typeStatus } from "@/api/shopping/goods";
    export default {
        name: "dataSp",
      data(){
          return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 品牌信息表格数据
            infoList: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            defaultDictType: "",
            typeOptions: [],
            // 查询参数
            queryParams: {
              pageNum: 1,
              pageSize: 10,
              supplierId: null,
              brandName: null,
              telephone: null,
              brandWeb: null,
              brandLogo: null,
              brandDesc: null,
              brandStatus: null,
              brandOrder: null,
              modifiedTime: null
            },
            // 表单参数
            form: {
              numsupper: 0,
            },
        }
      },
      created() {
         const supplierId = this.$route.params.supplierId || this.$route.params;
         this.getInfosi(supplierId);
         this.ListInfosi();
        // this.getList();
      },
      methods: {

        dinaji(row){
          var i = row.brandId;
          this.$router.push({
            path:"/goods/classify",
            query:{
              brandId: row.brandId,
              supplierId: row.supplierId
            }
          });

        },

        getInfosi(supplierId){
          getInfosi(supplierId).then(res=>{
            this.queryParams.supplierId = res.data.supplierId;
            this.defaultDictType = res.data.supplierId;
            this.getList();
          })
        },

        ListInfosi(){
          listInfosi().then(res=>{
            this.typeOptions = res.rows;
          })
        },

        /** 查询品牌信息列表 */
        getList() {
          this.loading = true;
          listInfobi(this.queryParams).then(response => {
            this.infoList = response.rows;
            this.total = response.total;
            this.loading = false;
          });
        },


        // 多选框选中数据
        handleSelectionChange(selection) {
          this.ids = selection.map(item => item.brandId)
          this.single = selection.length !== 1
          this.multiple = !selection.length
        },


        handleStatusChange(row){
          let text = row.brandStatus === "0" ? "启用" : "停用";
          this.$confirm('确认要"' + text + '"分类吗?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function () {
            return brandStatusbi(row.brandId, row.brandStatus)
          }).then(()=>{
            this.msgSuccess(text + "成功");
          }).catch(function () {
            row.brandStatus = row.brandStatus === "0" ? "1" : "0";
          })
        },

        // 取消按钮
        cancel() {
          this.open = false;
          this.reset();
        },
        // 表单重置
        reset() {
          this.form = {
            brandId: null,
            supplierId: null,
            brandName: null,
            telephone: null,
            brandWeb: null,
            brandLogo: null,
            brandDesc: null,
            brandStatus: 0,
            brandOrder: null,
            modifiedTime: null
          };
          this.resetForm("form");
        },

        /** 搜索按钮操作 */
        handleQuery() {
          this.queryParams.pageNum = 1;
          this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
          this.resetForm("queryForm");
          this.handleQuery();
        },


        /** 新增按钮操作 */
        handleAdd() {
          this.reset();
          this.open = true;
          this.title = "添加品牌信息";
          this.form.numsupper = this.$route.params.supplierId || this.$route.params;
          console.log(this.form.numsupper)
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
          this.reset();
          const brandId = row.brandId || this.ids
          getInfobi(brandId).then(response => {
            this.form = response.data;
            this.open = true;
            this.title = "修改品牌信息";
          });
        },
        /** 提交按钮 */
        submitForm() {
          this.$refs["form"].validate(valid => {
            if (valid) {
              if (this.form.brandId != null) {
                updateInfobi(this.form).then(response => {
                  if (response.code === 200) {
                    this.msgSuccess("修改成功");
                    this.open = false;
                    this.getList();
                  }
                });
              } else {
                addInfobi(this.form).then(response => {
                  if (response.code === 200) {
                    this.msgSuccess("新增成功");
                    this.open = false;
                    this.getList();
                  }
                });
              }
            }
          });
        },
        /** 删除按钮操作 */
        handleDelete(row) {
          const brandIds = row.brandId || this.ids;
          this.$confirm('是否确认删除品牌信息编号为"' + brandIds + '"的数据项?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function () {
            return delInfobi(brandIds);
          }).then(() => {
            this.getList();
            this.msgSuccess("删除成功");
          }).catch(function () {
          });
        },
      }
    }
</script>

<style scoped>

</style>
